<template>
	<view>
		<view class="goods_infobox">
			<view class="goods_type" :style="typeval == 0 ? '' : 'border-bottom:0;'">
				<view class="type_til">商品分类</view>
				<view class="type_arrbox" @click="showtype = true">
					<view class="type_arr">{{ typeText ? typeText[0] : '请选择' }}</view>
					<image class="type_img"
						src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png"></image>
				</view>
			</view>
			<view class="typeval" v-if="typeval != 0">{{ '该分类平台扣点' + (typeval * 100) + '%' }}</view>
			<view class="goods_type">
				<view class="type_til">商品名称</view>
				<input class="shopname" type="text" placeholder="请输入商品名称" v-model="reqData.ProductName">
			</view>
			<view class="goods_type">
				<view class="type_til">商品标签</view>
				<input class="shopname" type="text" placeholder="请输入商品标签" v-model="reqData.Tags">
			</view>
			<view class="goods_title_box">
				<view class="goods_til">商品主图</view>
				<!-- <input class="goods_text" type="text" placeholder="请填写商品名称、产地等关键信息" v-model="goodtitle"> -->
				<view class="goods_mainimg">
					<view class="item" v-for="(item, index) in mainimg" :key="index">
						<view class="del_con" @click.stop="delmainImg(index)">
							<uni-icons type="closeempty" color="#fff" size="16"></uni-icons>
						</view>
						<image :src="item.tempUrl" mode="aspectFill" />
					</view>
					<image class="main_icon" v-if="mainimg.length < 9"
						src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17321787826561148.png"
						@click="uploadmain"></image>
				</view>
			</view>
		</view>
		<view class="goods_delimgbox">
			<view class="goods_deltil">商品详情图</view>
			<view class="goods_delimg">
				<view class="item" v-for="(item, index) in detailsimg" :key="index">
					<view class="del_con" @click.stop="delImg(index)">
						<uni-icons type="closeempty" color="#fff" size="16"></uni-icons>
					</view>
					<image :src="item.tempUrl" mode="aspectFill" />
				</view>
				<image class="del_icon" v-if="detailsimg.length < 9"
					src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17321787619411200.png"
					@click="uploaddetails"></image>
			</view>
		</view>
		<view class="goods_grow" v-for="(item, index) in specList" :key="index">
			<view class="grow">
				<view class="grow_til">商品规格</view>
				<input class="grow_input" type="text" placeholder="请填写" v-model="item.Style">
			</view>
			<view class="grow">
				<view class="grow_til">商品售价</view>
				<input class="grow_input" type="text" placeholder="请填写" v-model="item.Price">
			</view>
			<view class="grow">
                <view class="grow_til">所需挥豆</view>
                <input class="grow_input" type="text" placeholder="请填写" v-model="item.Score">
            </view>
			<view class="grow">
                <view class="grow_til">商品库存</view>
                <input class="grow_input" type="text" placeholder="请填写" v-model="item.Stock">
            </view>
			<!-- <view class="grow">
                <view class="grow_til">库存</view>
                <input class="grow_input" type="text" placeholder="请填写">
            </view> -->
			<view class="grow_sp" v-if="index == (specList.length - 1)" @click="sp_add">
				<image class="sp_img" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17321798393631354.png">
				</image>
				<view class="sptitle">添加商品规格</view>
			</view>
			<view class="grow_sp" v-else>
				<image class="sp_imgdel"
					src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17322568049101191.png"></image>
				<view class="sp_del" @click="sp_delList(index)">删除规格</view>
			</view>
		</view>

		<view class="bottombox">
			<view class="bottombtn">
				<view class="draft_btn">保存草稿</view>
				<view class="add_btn" @click="Publish">{{ '发布商品' }}</view>
			</view>
		</view>

		<!-- 商品分类 -->
		<u-picker :show="showtype" immediateChange @confirm="setShopType" @cancel="showtype = false"
			:columns="shoptypeList"></u-picker>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			showtype: false,
			typeText: '',
			typeval: 0,
			goodtitle: '',
			mainimg: [],
			detailsimg: [],
			specList: [
				{
					Style: '',
					Price: '',
					Score:'',
					Stock:'',
				},
			],
			shoptypeList: [],
			typeList: [],
			reqData: {
				ProductName: '', // 商品名称
				ProductNo: '',//商品编号
				ProductCatalog: '',//商品分类ID
				Images: '',// 商品主图
				Description: '',//商品详情
				Tags: '', // 标签
			},
			shop: {},
		};
	},
	onLoad() {
		this.GetProduct()
		// this.IsShopManage()
		this.MyShopSaleData()
	},
	methods: {
		async MyShopSaleData() {
			let res = await this.$api.post('/Order/MyShopSaleData')
			if (res.code == 0) {
				this.shop = res.data
			}

		},
		delmainImg(index) {
			this.mainimg.splice(index, 1);
		},
		delImg(index) {
			this.detailsimg.splice(index, 1);
		},
		setShopType(e) {
			this.typeText = e.value
			this.showtype = false
			for (let i = 0; i < this.typeList.length; i++) {
				if (this.typeText == this.typeList[i].CataName) {
					this.reqData.ProductCatalog = this.typeList[i].ID
					this.typeval = this.typeList[i].PlatCommission
					return
				}

			}
		},
		async GetProduct() {
			let list = []
			let res = await this.$api.post('Products/GetProductCatalog')
			if (res.code == 0) {
				this.typeList = res.data
				for (let i = 0; i < res.data.length; i++) {
					list.push(res.data[i].CataName)

				}
				this.shoptypeList.push(list)
			}
		},
		async Publish() {
			let _this = this
			let main_img = []
			for (let i = 0; i < this.mainimg.length; i++) {
				main_img.push(this.mainimg[i].netPath)
			}
			this.reqData.Images = main_img.join(',')
			let deta_img = []
			for (let i = 0; i < this.detailsimg.length; i++) {
				deta_img.push(this.detailsimg[i].netPath)
			}
			this.reqData.Description = deta_img.join(',')
			let itemJson = JSON.stringify(this.specList)
			let res = await this.$api.post('Product/Publish', {
				...this.reqData,
				StyleItemStr: itemJson,
				ShopID: this.shop.Shop.ID
			})
			if (res.code == 0) {
				_this.$pv.msg('发布成功');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);


			} else {
				_this.$pv.msg(res.message);
			}
		},
		sp_add() {
			this.specList.unshift({
				Style: '',
				Price: '',
				Score:'',
				Stock:'',
			})
		},
		sp_delList(index) {
			this.specList.splice(index, 1)
		},
		//文件上传
		async uploading(url, tempKey) {
			const r = await this.$upload(url, (pro) => {
				for (let i = 0; i < this.mainimg.length; i++) {
					if (this.mainimg[i].tempKey == tempKey) {
						this.mainimg[i].pro = pro;
					}
				}
			});
			console.log(r, 'r');
			for (let i = 0; i < this.mainimg.length; i++) {
				if (this.mainimg[i].tempKey == tempKey) {
					this.mainimg[i].netPath = r;
				}
				console.log('net');

			}
			console.log(this.mainimg);
			this.$pv.closeLoad()
			// this.reqData.Images.push(r)
		},
		uploadmain() {
			let _this = this;
			let imglength = this.mainimg.length || 0
			uni.chooseMedia({
				count: 9 - imglength,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				async success(res) {
					console.log(res, 'res');
					for (let i = 0; i < res.tempFiles.length; i++) {
						let o = {
							duration: 0,
							fileType: res.tempFiles[i].fileType,
							tempUrl: res.tempFiles[i].tempFilePath,
							flieUrl: res.tempFiles[i].tempFilePath,
							tempKey: uni.$u.guid(8),
							pro: 0,
						};
						_this.mainimg.push(o);
						let rex = await _this.uploading(o.flieUrl, o.tempKey);
					}
				},
			});
		},
		async uploadDeing(url, tempKey) {
			const r = await this.$upload(url, (pro) => {
				for (let i = 0; i < this.detailsimg.length; i++) {
					if (this.detailsimg[i].tempKey == tempKey) {
						this.detailsimg[i].pro = pro;
					}
				}
			});
			console.log(r, 'r');
			for (let i = 0; i < this.detailsimg.length; i++) {
				if (this.detailsimg[i].tempKey == tempKey) {
					this.detailsimg[i].netPath = r;
				}
				console.log('net');

			}
			console.log(this.detailsimg);
			this.$pv.closeLoad()
			// this.reqData.Images.push(r)
		},
		uploaddetails() {
			let _this = this;
			let imglength = this.detailsimg.length || 0
			uni.chooseMedia({
				count: 9 - imglength,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				async success(res) {
					console.log(res, 'res');
					for (let i = 0; i < res.tempFiles.length; i++) {
						let o = {
							duration: 0,
							fileType: res.tempFiles[i].fileType,
							tempUrl: res.tempFiles[i].tempFilePath,
							flieUrl: res.tempFiles[i].tempFilePath,
							tempKey: uni.$u.guid(8),
							pro: 0,
						};
						_this.detailsimg.push(o);
						let rex = await _this.uploadDeing(o.flieUrl, o.tempKey);
					}
				},
			});
		},
	},

}
</script>
<style lang='scss'>
page {
	background-color: #f6f6f6;
}

.goods_infobox {
	background-color: #fff;
	margin-top: 16rpx;
	padding-bottom: 32rpx;

	.goods_type {
		width: calc(100%-32rpx);
		height: 106rpx;
		margin-left: 32rpx;
		border-bottom: 1rpx solid #e4e4e4;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 32rpx;
		box-sizing: border-box;

		.shopname {
			flex: 1;
			text-align: right;
			font-size: 32rpx;
		}

		.type_til {
			font-size: 32rpx;
			color: #333333;
		}

		.type_arrbox {
			display: flex;
			align-items: center;

			.type_img {
				width: 32rpx;
				height: 32rpx;
			}

			.type_arr {
				font-size: 32rpx;
				color: #333333;
			}
		}
	}

	.typeval {
		width: 100%;
		text-align: right;
		font-size: 20rpx;
		color: red;
		border-bottom: 1rpx solid #e4e4e4;
		padding-right: 32rpx;
		padding-bottom: 4rpx;
	}

	.goods_title_box {
		margin-top: 30rpx;
		padding-left: 32rpx;
		box-sizing: border-box;

		.goods_til {
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 24rpx;
		}

		.goods_text {
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 48rpx;
		}

		.goods_mainimg {
			display: flex;
			flex-wrap: wrap;

			// justify-content: space-between;
			.item {
				position: relative;
				// margin-top: 15rpx;
				margin-right: 24rpx;
				margin-bottom: 24rpx;
				width: 152rpx;
				height: 152rpx;
				background-color: #eee;
				border-radius: 16rpx;

				.pro {
					position: absolute;
					top: 50%;
					width: 100%;
					transform: translateY(-50%);
					text-align: center;
					color: #3a3a3a;
				}

				image {

					height: 100%;
					width: 100%;
					border-radius: 16rpx;
				}

				.del_con {
					position: absolute;
					top: 0;
					right: 0;
					background: rgba(0, 0, 0, 0.4);
					height: 40rpx;
					width: 40rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 0 16rpx 0 16rpx;
				}
			}

			.main_icon {
				width: 152rpx;
				height: 152rpx;
				// margin-left: 24rpx;
			}
		}
	}
}

.goods_delimgbox {
	background-color: #fff;
	padding-left: 32rpx;
	padding-bottom: 32rpx;
	box-sizing: border-box;
	margin-top: 16rpx;

	.goods_deltil {
		font-size: 32rpx;
		color: #333333;
		margin: 30rpx 0 24rpx 0;
	}

	.goods_delimg {
		display: flex;
		flex-wrap: wrap;

		// justify-content: space-between;
		.item {
			position: relative;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			width: 152rpx;
			height: 152rpx;
			background-color: #eee;
			border-radius: 16rpx;

			.pro {
				position: absolute;
				top: 50%;
				width: 100%;
				transform: translateY(-50%);
				text-align: center;
				color: #3a3a3a;
			}

			image {

				height: 100%;
				width: 100%;
				border-radius: 16rpx;
			}

			.del_con {
				position: absolute;
				top: 0;
				right: 0;
				background: rgba(0, 0, 0, 0.4);
				height: 40rpx;
				width: 40rpx;
				text-align: center;
				line-height: 40rpx;
				border-radius: 0 16rpx 0 16rpx;
			}
		}

		.del_icon {
			width: 152rpx;
			height: 152rpx;
		}
	}
}

.goods_grow {
	background-color: #fff;
	margin-top: 16rpx;

	.grow {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 32rpx);
		height: 104rpx;
		margin-left: 32rpx;
		border-bottom: 1rpx solid #e4e4e4;
		padding-right: 32rpx;
		box-sizing: border-box;

		.grow_til {
			width: 150rpx;
			font-size: 32rpx;
			color: #333333;
		}

		.grow_input {
			flex: 1;
			text-align: right;
			font-size: 32rpx;
		}
	}

	.grow_sp {
		display: flex;
		align-items: center;
		width: calc(100% - 32rpx);
		height: 104rpx;
		margin-left: 32rpx;

		.sp_img {
			width: 40rpx;
			height: 40rpx;
		}

		.sptitle {
			font-size: 32rpx;
			color: #FF6030;
			margin-left: 16rpx;
		}

		.sp_imgdel {
			width: 32rpx;
			height: 32rpx;
			margin-left: auto;
		}

		.sp_del {
			font-size: 28rpx;
			color: #FF6030;
			margin: 0 32rpx 0 8rpx;
		}
	}
}

.bottombox {
	width: 100%;
	height: 196rpx;

	.bottombtn {
		width: 100%;
		height: 196rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.draft_btn {
			width: 200rpx;
			height: 88rpx;
			border-radius: 44rpx;
			border: 2rpx solid #E4E4E4;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
		}

		.add_btn {
			width: 454rpx;
			height: 88rpx;
			background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #fff;
		}
	}
}
</style>